<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>查询图书</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
<h2>图书信息查询</h2>
<input type="text" id="keyword" placeholder="请输入书名、作者或出版社"><br>
<button onclick="queryBooks()">查询</button>

<table id="bookTable">
  <thead>
  <tr>
    <th>图书编号</th>
    <th>书名</th>
    <th>作者</th>
    <th>出版社</th>
    <th>出版年份</th>
    <th>价格</th>
    <th>库存数量</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>
<script>
  function queryBooks() {
    var keyword = $("#keyword").val();
    $.ajax({
      url: "BookServlet",
      type: "GET",
      data: {
        keyword: keyword
      },
      dataType: "json",
      success: function (data) {
        var tbody = $("#bookTable tbody");
        tbody.empty();
        for (var i = 0; i < data.length; i++) {
          var book = data[i];
          var row = "<tr><td>" + book.bookId + "</td><td>" + book.bookName + "</td><td>" + book.author + "</td><td>" + book.publisher + "</td><td>" + book.publicationYear + "</td><td>" + book.price + "</td><td>" + book.stockQuantity + "</td></tr>";
          tbody.append(row);
        }
      },
      error: function (xhr, status, error) {
        console.log("查询图书出错：", error);
      }
    });
  }
</script>
</body>

</html>